<template>
	<view class="main box box-align-center box-pack-center">
		<swiper class="swiper" :autoplay="false" indicator-dots="false" :circular="true" :current="currentTab">
			<swiper-item v-for="(item,index) in imgurl" :key="index" class="box box-align-center box-pack-center">
				<view class="swiper-item">
					<u-image :src="item.fileSuffix=='mp4'?item.firstFrame:item.url" width="750rpx" :fade="false" height="100%" bg-color="#000" mode="widthFix"
						@click="item.fileSuffix=='mp4'?showVideo(item.url):previewImage(item)" :show-loading="false">
					</u-image>
					<u-image src="@/static/home/icon_play.png" width="40rpx" height="40rpx" class="posa" :fade="false" @click="showVideo(item.url)"
						v-if="item.fileSuffix =='mp4'" bg-color="#000" :show-loading="false">
					</u-image>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgurl: [],
				currentTab: 0,
			}
		},
		onLoad(opt) {
			this.imgurl = []
			let newData = uni.getStorageSync('item');
			this.setTitle()
			this.currentTab = opt.index
			// this.$nextTick((res => {
			// }))
			setTimeout(()=>{
				this.imgurl = JSON.parse(newData)
			},200)
		},
		methods: {
			reset(newData){
				
			},
			setTitle() {
				uni.setNavigationBarColor({
					frontColor: '#ffffff',
					backgroundColor: '#000'
				})
			},
			previewImage(val) {
				if (val.fileSuffix == 'jpg' || val.fileSuffix == 'png') {
					uni.previewImage({
						current: val.url, // 当前显示图片的 http 链接
						urls: this.imgurl.map(res => {
							if (res.fileSuffix != "mp4") return res.url
						}).filter(i => i && i.trim()) // 需要预览的图片 http 链接列表
					});
				}
			},
			showVideo(url) {
				uni.navigateTo({
					url: `/pageHome/video?url=` + url
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.main {
		background-color: #000;
		height: 100%;

		.swiper {
			width: 100%;
			height: 100%;
		}

		.swiper-item {
			position: relative;

			.posa {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		}
	}
</style>
